<!-- 供应看货 -->
<template>
	<view>
		<go-top :scrollTop="scrollTop"></go-top>
		<u-navbar :isFixed="true" :title="arraytype==0?'供应看货':'求购看货'" :borderBottom="false"></u-navbar>
		<!-- <view class="flex_bet_align">
			<view class="top_index" :class="arraytype==0?'red':''" @click="changetype(0)">
				供应看货
			</view>
			<view class="top_index" :class="arraytype==1?'red':''" @click="changetype(1)">
				求购看货
			</view>
		</view> -->
		<view class="tabbar flex" :style="'top:'+navH+'px'">

			<view class="nowrap">
				<u-tabs name="cate_name" count="cate_count" :offset='offset' bg-color="#F8F8F8" :list="tabs"
					:bar-style="barStyle" active-color=" #38BE8C" inactive-color="#8A8A8A" :current="current"
					@change="change">
				</u-tabs>

				<view class="P120">
					<view class="searchContent">
						<u-icon name="search" color="#B1B8C8" size="28" class="search_icon" @click="demand"></u-icon>
						<u-input v-model="searchKey" placeholder="搜索商品名称、看货编号" type="text" confirm-type="search"
							:border="false" placeholderStyle="color:#B1B8C8" class="search_" @confirm="demand"
							:clearable="false" />
						<u-icon name="close-circle" color="#C0C4CC" size="28" class="search_icon_c" @click="clear"
							v-if="searchKey.length>0">
						</u-icon>
					</view>
				</view>
			</view>
			<!-- 	<view class="tab">
				<view class="black" @click="changetype">{{array[arraytype]}}</view>
			</view> -->
		</view>
		<view v-if="arraytype==0" class="box">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="top flex_bet_align">
					<view class="buyer">买家：{{item.joinbuyers.name}} <text class="yxbuy"
							v-if="item.is_yx&&item.status==5">意向客户</text>
					</view>
					<view class="status" v-if="item.status==1">预约看货，待确认</view>
					<view class="status" v-if="item.status==2">待支付</view>
					<view class="status" v-if="item.status==3">已拒绝</view>
					<view class="status" v-if="item.status==4">待实地看货</view>
					<view class="status" v-if="item.status==5">完成看货</view>
					<view class="status" v-if="item.status==6">订单已完成</view>
					<view class="status" v-if="item.status==7">取消订单</view>
					<view class="status" v-if="item.status==8">取消看货</view>
					<view class="status" v-if="item.status==9">取消看货，待审核</view>
				</view>
				<view class="flex_align" @click="goDetail(item.id)">
					<image class="goodsImg" :src="item.getgoodsinfo.image"></image>
					<view class="content">
						<view class="goodsName clamp2">{{item.getgoodsinfo.title}}</view>
						<view class="goodsName clamp2">{{item.getgoodsinfo.spec_value}}</view>
						<view class="price">￥{{item.getgoodsinfo.money}}/{{item.getgoodsinfo.unit}}</view>
						<!-- <view class="sku">产品规格产品规格</view> -->
					</view>
				</view>
				<view class="bottom">
					<view class="msg"><text>购买数量：{{item.number}}{{item.getgoodsinfo.unit}}</text>
						<!-- 诚意金：￥{{item.money}} -->
					</view>
					<view class="btnGroup flex_align">
						<view class="btn" v-if="item.status==3||item.status==6||item.status==7||item.status==8"
							@click="delorder(item.id,index)">删除订单</view>
						<view class="btnFill" v-if="item.status==1" @click="goDetail(item.id)">同意</view>
						<view class="btn" v-if="item.status==1" @click="operate(item.id,3)">拒绝</view>
						<view class="btnFill" v-if="item.status==9" @click="operate(item.id,8)">同意申请</view>
						<view class="btn" v-if="item.status==9" @click="operate(item.id,4)">拒绝申请</view>

						<view class="btnFill" v-if="item.status==4" @click="operate(item.id,5)">确认看货</view>
						<view class="btn" @click="chat(item)">聊一聊</view>
						<view class="btn" @click="dialing(1,item.joinbuyers.id,item.joinbuyers.mobile)">联系买家</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="arraytype==1" class="box">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="top flex_bet_align">
					<view class="buyer">卖家：{{item.joinseller.name}}</view>
					<view class="status" v-if="item.status==1">待确认</view>
					<view class="status" v-if="item.status==2">待支付</view>
					<view class="status" v-if="item.status==3">已拒绝</view>
					<view class="status" v-if="item.status==4">待实地看货</view>
					<view class="status" v-if="item.status==5">完成看货</view>
					<view class="status" v-if="item.status==6">订单已完成</view>
					<view class="status" v-if="item.status==7">取消订单</view>
					<view class="status" v-if="item.status==8">取消看货</view>
					<view class="status" v-if="item.status==9">取消看货，待审核</view>
				</view>
				<view class="flex_align" @click="goDetail(item.id)">
					<image class="goodsImg" :src="item.getgoodsinfo.image"></image>
					<view class="content">
						<view class="goodsName clamp2">{{item.getgoodsinfo.title}}</view>
						<view class="goodsName clamp2">{{item.getgoodsinfo.spec_value}}</view>
						<view class="price">￥{{item.getgoodsinfo.money}}/{{item.getgoodsinfo.unit}}</view>
						<!-- <view class="sku">产品规格产品规格</view> -->
					</view>
				</view>
				<view class="bottom">
					<view class="msg"><text>购买数量：{{item.number}}{{item.getgoodsinfo.unit}}</text>
						<!-- 诚意金：￥{{item.money}} -->
					</view>
					<view class="btnGroup flex_align">
						<view class="btn" v-if="item.status==3||item.status==6||item.status==7||item.status==8"
							@click="delorder(item.id,index)">删除订单</view>
						<view class="btnFill" v-if="item.status==2" @click="pay(item.id)">立即支付</view>
						<view class="btn" v-if="item.status==1||item.status==2" @click="operate(item.id,7)">取消订单</view>
						<!-- <view class="btnFill" v-if="item.status==4" @click="operate(item.id,5)">确认看货</view> -->
						<view class="btn" v-if="item.status==4" @click="operate(item.id,9)">取消看货</view>
						<view class="btnFill" v-if="item.status==5" @click="purchase(item.id)">立即购买</view>
						<view class="btn" v-if="item.status==5" @click="operate(item.id,12)">不满意</view>
						<view class="btn" @click="chat(item)">聊一聊</view>
						<view class="btn" @click="dialing(2,item.joinseller.id,item.joinseller.mobile)">联系卖家</view>
					</view>
				</view>
			</view>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wdingdan.png" mode="widthFix"></image>
			<view class="text">暂无订单</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>

		<u-popup mode="center" border-radius="16" v-model="reason" :closeable="true">
			<view class="modal">
				<view class="title">拒绝理由</view>
				<view style="height: 20rpx;"></view>
				<u-input v-model="refuse_note" type="textarea" :border="true" placeholder="请输入拒绝理由" :maxlength="50"
					:autoHeight="true" class="mainlineinput" :clearable="false" height="200" />
				<view style="height: 20rpx;"></view>
				<u-button shape="circle" type="error" @click="refuse">确认拒绝</u-button>
				<view style="height: 20rpx;"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this, $paginator;
	export default {
		data() {
			return {
				tabs: [{
						cate_name: '全部'
					},
					{
						cate_name: '待确认',
						cate_count: ''
					},
					{
						cate_name: '待看货',
						cate_count: ''
					},
					{
						cate_name: '待审核',
						cate_count: ''
					},
					{
						cate_name: '已完成',
						cate_count: ''
					},
					{
						cate_name: '已支付尾款'
					},
					{
						cate_name: '已取消'
					},
					{
						cate_name: '已拒绝'
					}
				],
				current: 0,
				// 回到头部按钮距离
				scrollTop: 0,
				array: ["求购看货", "供应看货"],
				arraytype: 0,
				navH: 0,
				barStyle: {},
				list: [],
				nomore: false,
				// 操作id
				operate_id: 0,
				// 显示拒绝理由
				reason: false,
				// 拒接理由
				refuse_note: "",

				offset: [10, 0],
				// 搜索框的值
				searchKey: "",
			}
		},
		onLoad(options) {
			console.log(options)
			_this = this
			_this.navH = App.globalData.navHeight;
			if (options.type) {
				_this.arraytype = options.type
			}

		},
		onShow() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			// 查询数据
			demand() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			clear() {
				_this.searchKey = ""
				console.log(_this.searchKey)
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			//内层刷新这层
			isonshow() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			getdata: function(firstLoad = false) {
				$paginator.getData('getsuborderlist', {
					order_type: _this.current,
					tab_type: _this.arraytype == 0 ? 2 : 1,
					search: _this.searchKey
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
					_this.tabs[1].cate_count = data.count.qr_num
					_this.tabs[2].cate_count = data.count.kh_num
					_this.tabs[3].cate_count = data.count.sh_num
					_this.tabs[4].cate_count = data.count.wc_num
					_this.tabs[5].cate_count = data.count.pay_num
					_this.tabs[6].cate_count = data.count.qx_num
					_this.tabs[7].cate_count = data.count.jj_num
				})
			},
			// 查询状态
			change(index) {
				_this.list = []
				_this.current = index
				_this.searchKey = ""
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			// 切换看货类型
			changetype(index) {
				_this.list = []
				_this.arraytype = index
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			// 跳转到详情
			goDetail(id) {
				uni.navigateTo({
					url: "/personal/appointmentDetail?id=" + id + "&type=" + _this.arraytype
				})
			},
			// 订单操作
			//订单操作
			operate(id, type) {
				if (type == 3) {
					_this.reason = true
					_this.operate_id = id
				}
				if (type == 7 || type == 9 || type == 8 || type == 4 || type == 5) {
					let title = "确认本次操作"
					if (type == 9) {
						title = "取消看货需等待卖家审核,确认取消？"
					} else if (type == 8) {
						title = "同意用户取消看货？"
					} else if (type == 7) {
						title = "确认取消订单？"
					} else if (type == 4) {
						title = "拒绝用户取消看货申请？"
					} else if (type == 5) {
						title = "已完成看货？"
					}
					uni.showModal({
						content: title,
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("orderstatus", {
									order_id: id,
									order_type: type
								}).then(data => {
									$paginator = new _this.$paginator(_this.$api)
									_this.getdata(true)
								});
							}
						}
					});
				}
				if (type == 12) {
					uni.showModal({
						content: "确认不满意，退还诚意金？",
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("orderstatus", {
									order_id: id,
									order_type: 7
								}).then(data => {
									$paginator = new _this.$paginator(_this.$api)
									_this.getdata(true)
								});
							}
						}
					});
				}
			},
			// 删除订单
			delorder(id, index) {
				uni.showModal({
					content: '确认删除订单？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delordertime", {
								order_id: id
							}).then(data => {
								_this.list.splice(index, 1)
							});
						}
					}
				});
			},
			//拒绝订单
			refuse() {
				if (_this.refuse_note.length < 1) {
					uni.showToast({
						title: "请输入拒绝理由",
						icon: "none"
					})
				} else {
					_this.$api.post("orderstatus", {
						order_id: _this.operate_id,
						refuse_note: _this.refuse_note,
						order_type: 3
					}).then(data => {
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
						_this.refuse_note = ""
						_this.reason = false
					});
				}
			},
			// 立即支付
			pay(id) {
				uni.navigateTo({
					url: "orderPay?outnumber=2&source=2&id=" + id
				})
			},
			// 立即购买
			purchase(id) {
				uni.navigateTo({
					url: "anOrder?id=" + id
				})
			},
			//拨号并记录
			dialing(call_type, client_uid, mobile) {
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: call_type
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},

			chat(item) {
				let images = []
				item.getgoodsinfo.number = item.number
				item.getgoodsinfo.name = item.joinbuyers.name

				item.getgoodsinfo.client_uid = item.joinbuyers.id
				images.push(item.getgoodsinfo.image)
				item.getgoodsinfo.images = images

				console.log(item)

				wx.setStorageSync('list', item.getgoodsinfo)
				uni.navigateTo({
					url: '../chat/chatingroom?type=5' + '&member_type=1'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
		background-color: #F8F8F8;
	}

	.box {
		background: #F8F8F8;
	}

	.top_index {
		text-align: center;
		width: 50%;
		line-height: 88rpx;
	}

	.red {
		color: #38BE8C;
		font-weight: 600;
	}

	.tabbar {
		padding: 10rpx;
		position: sticky;
		background-color: #F8F8F8;
		z-index: 10;

		.nowrap {
			width: 80%;
			flex: 1;
		}

		.tab {
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #8a8a8a;
			padding: 0 10rpx;

			.black {
				color: #333333;
			}
		}

		.P120 {
			padding: 10rpx 20rpx;
		}

		.searchContent {
			width: 100%;
			height: 74rpx;
			border-radius: 37rpx;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-right: 28rpx;

			.search_icon {
				margin-left: 32rpx;
			}

			.search_icon_c {
				margin-right: 32rpx;
			}

			.search_ {
				color: #2C3240;
				font-size: 26rpx;
				flex: 1;
				margin: 0 14rpx;
			}
		}
	}

	.card {
		padding: 24rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;

		.top {
			margin-bottom: 28rpx;
			font-size: 28rpx;
			color: #999999;

			.buyer {
				color: #000000;
			}

			.yxbuy {
				color: #38BE8C;
				margin-left: 30rpx;
			}
		}

		.goodsImg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			margin-right: 22rpx;
			background-color: #EEEEEE;
		}

		.content {
			width: 480rpx;
		}

		.goodsName {
			font-size: 28rpx;
			color: #333333;
			line-height: 36rpx;
			height: 72rpx;
		}

		.price {
			font-size: 24rpx;
			font-weight: 500;
			color: #f73f3f;
			margin: 8rpx 0 14rpx;
		}

		.sku {
			font-size: 24rpx;
			color: #999999;
		}

		.bottom {
			padding: 30rpx 0;
			margin-top: 40rpx;
			border-top: 1rpx solid #EEEEEE;

			.msg {
				font-size: 28rpx;
				font-weight: 500;
				text-align: right;
				color: #333333;

				text {
					margin-right: 30rpx;
				}
			}

			.btnGroup {
				flex-direction: row-reverse;
				text-align: center;
				line-height: 70rpx;
				font-size: 26rpx;
				margin-top: 45rpx;

				.btn {
					width: 152rpx;
					height: 70rpx;
					background: #ffffff;
					border: 1rpx solid #333333;
					border-radius: 37rpx;
					color: #333333;
					margin-left: 30rpx;
				}

				.btn:last-child {
					margin-left: 0;
				}

				.btnFill {
					width: 152rpx;
					height: 70rpx;
					background: linear-gradient(90deg, #38be8c, #06adba 96%);
					border-radius: 36rpx;
					color: #FFFFFF;
					margin-left: 30rpx;
				}
			}
		}
	}

	.modal {
		width: 600rpx;
		text-align: center;
		padding: 40rpx 40rpx 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #030517;
			line-height: 48rpx;
			margin-bottom: 36rpx;
		}

		.name {
			font-size: 28rpx;
			color: #333333;
			line-height: 90rpx;
			width: 150rpx;
			text-align: left;
		}

		.item {
			margin-bottom: 26rpx;
		}

		input {
			height: 90rpx;
			border: 1rpx solid #999999;
			font-size: 28rpx;
			padding: 25rpx 22rpx;
			margin-left: 20rpx;
			flex: 1;
			text-align: left;
		}

		.confirm {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #38be8c;
			padding: 29rpx 0 26rpx;
			border-top: 1rpx solid #FAFAFA;
			margin-top: 40rpx;
		}
	}
</style>
